import classNames from "classnames";
import styles from './index.module.css'
import CarbonSink from "../componets/carbonSink";
import ElevatorEMC from "../componets/elevatorEMC";
import ContentBlock from "../componets/contentBlock";
import CarbonDevItem from "../componets/carbonDevItem";
import CenterImage from "../componets/centerImage";
import u64 from '@/app/assets/images/productIntro/u64.png';
import CarbonDevImg from '@/app/assets/images/productIntro/u34.png';
import CarbonHuiImg from '@/app/assets/images/productIntro/u37.png';
import ElevatorImg from '@/app/assets/images/productIntro/u38.png';
import LYImg from '@/app/assets/images/productIntro/u69.png';
import NYImg from '@/app/assets/images/productIntro/u70.png';
import XMImg from '@/app/assets/images/productIntro/u71.png';
import WWImg from '@/app/assets/images/productIntro/u72.png';
import HSLImg from '@/app/assets/images/productIntro/u75.png';
import FDImg from '@/app/assets/images/productIntro/u74.png';
import GFImg from '@/app/assets/images/productIntro/u73.png';
import SDImg from '@/app/assets/images/productIntro/u76.png';


export default function Carbon() {
  return (
    <div className="w-full flex flex-col pt-10 pb-10">
      <ContentBlock title="首厚致力于">
        <div className="flex">
          <div className="carbon-bgc flex-1 h-[316px] text-white p-4">
            <div>
              <p className="text-center">首厚智能</p>
            </div>
            <div>
              <p className="leading-8">
              以“节能降碳”为核心，致力为客户提供碳全链条产业服务，助力环境质量持续改善及“双碳”目标实现。基于物联网技术的软硬件产品、解决方案及数据服务，为低碳经济发展、智慧生态转型、智慧园区等领域提供全流程技术支撑。为碳管理提供整体解决方案，助力能源结构、产业结构优化调整，推动环境、经济、社会的可持续发展。
              </p>
            </div>
          </div>
          <div 
          style={{backgroundImage: `url(${u64.src})`}}
          className="w-[791px] bg-no-repeat bg-top bg-cover ml-4"></div>
        </div>
      </ContentBlock>

      <ContentBlock title="服务项目" desc="以客户需求和产品发展理念为驱动力">
        <div className="flex justify-between mt-8">
          <CarbonDevItem src={CarbonDevImg} title="碳资产开发" />
          <CarbonDevItem src={ElevatorImg} title="碳汇" />
          <CarbonDevItem src={CarbonHuiImg} title="电梯EMC" />
        </div>
      </ContentBlock>

      <ContentBlock title="碳资产开发">
        <div className="flex items-center">
          <div 
          className="w-[424px] h-[240px] border-green" >
            <div 
            className={classNames("border-b-green p-1 text-[18px]", styles.titleBefore)} 
            style={{backgroundColor: 'rgba(205, 240, 203, 0.5)'}}>哪些项目可以进行碳资产开发？</div>
            <div className="p-[10px]">
              <p>碳资产开发是指通过减少温室气体排放或增加碳汇等方式，将碳排放权转化为具有经济价值的资产的过程。</p>
              <p>碳资产开发的项目包含：林业碳汇项目、可再生能源发电项目、甲烷回收利用项目、工业节能项目、燃料替代项目、过程减排项目。</p>
            </div>
          </div>
          <div className="flex flex-1 ml-4 flex-wrap justify-between">
            <CenterImage src={LYImg} title="林业" />
            <CenterImage src={NYImg} title="农业" />
            <CenterImage src={XMImg} title="畜牧" />
            <CenterImage src={WWImg} title="污水" />
            <CenterImage src={HSLImg} title="红树林" />
            <CenterImage src={FDImg} title="风电" />
            <CenterImage src={GFImg} title="光伏" />
            <CenterImage src={SDImg} title="水电" />
          </div>
        </div>
      </ContentBlock>

      {/* 碳汇 */}
      <CarbonSink />

      {/* 电梯EMC */}
      <ElevatorEMC />

    </div>
  )
}